<article>
    <h1><?php echo $GLOBALS['title'] ?></h1>
    <p>在了解浮动属性之前，首先我们先了解一下html中关于<code>display</code>属性的相关知识</p>
    <h2><a>display</a></h2>
    <p><code>display</code> 属性规定元素应该生成的框的类型。</p>
    <ul>
    	<li><code>display: none;</code> 可以让元素隐藏起来并且不占用  页面空间,浏览器会完全忽略掉这个元素，该元素将不会被  显示，也不会占据文档中的位置</li>
    	<p></p>
    	<li><code>display:inline-block;</code>指定元素兼有块级和行级元素的特性，  即在行内显示但是可以设定宽高。<a>注意：IE6不支持此属性，但是有一些元素具有此属性，比如:img\input。</a></li>
    	<p></p>
    	<li><code>display:inline;</code>块元素转为行元素。</li>
    	<p></p>
    	<li><code>display:block</code>行元素转为块元素。</li>
    </ul>
    <h2><a>浮动float</a></h2>
    <h3>浮动相关问题</h3>
    <ul>
        <li>可以改变普通文档流的排列方式，可以使得块元素在同一行中排列，使我们的布局更加的方便。多个盒子都浮动后，就产生了块级元素水平排列的效果。</li>
        <p></p>
	    <li>通过设置<code>float</code>属性来完成另一种脱离文档流的行为  就是浮动，分为左、右浮动
		</li>
		<p></p>
		<li>浮动是脱离文档流的，也就是其他元素视他不</li>
		<p></p>
		<li>多个浮动元素不会相互覆盖</li>
		<p></p>
		<li>若包含的容器太窄，无法容纳水平排列的多个浮动元素，  那么最后的浮动盒子会向下移动,但如果浮动元素的高度  不同，那当它们向下移动时可能会被卡住</li><p></p>
		<li>给一个元素设定了浮动属性，最好给他设定宽高的 值，否则有可能发生浮动错位。</li>
    	
    </ul>

	<h3>浮动什么时候停止呢？</h3>
	<ul>
		<li>当遇到一个浮动元素后会停止</li>
		<p></p>
		<li>遇到父级元素后会停止</li>		
	</ul>
	<table class="dataintable">
	    <tbody>
	        <tr>
	            <th>
	                值
	            </th>
	            <th>
	                描述
	            </th>
	        </tr>
	        <tr>
	            <td>
	                <a>left</a>
	            </td>
	            <td>
	                元素向左浮动。
	            </td>
	        </tr>
	        <tr>
	            <td>
	                <a>right</a>
	            </td>
	            <td>
	                元素向右浮动。
	            </td>
	        </tr>
	        <tr>
	            <td>
	                <a>none</a>
	            </td>
	            <td>
	                默认值。元素不浮动，并会显示在其在文本中出现的位置。
	            </td>
	        </tr>
	        <tr>
	            <td>
	                <a>inherit</a>
	            </td>
	            <td>
	                规定应该从父元素继承 float 属性的值。
	            </td>
	        </tr>
	    </tbody>
	</table>
	<h3>实例</h3>
	<p>请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：</p>
	<img src="__PUBLIC__/images/ct_css_positioning_floating_right_example.gif" alt="">
	<p>再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。</p>
	<p>如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。</p>
	<img src="__PUBLIC__/images/ct_css_positioning_floating_left_example.gif" alt=""><p>如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：</p>
	<img src="__PUBLIC__/images/ct_css_positioning_floating_left_example_2.gif" alt="">
	<h3>作业</h3>
	<blockquote>
	<p>通过学习的布局，把腾讯首页以色块的方式布出来</p>
	</blockquote>

</article>